<template>
  <div class="intelligent-linkage">
    <div class="title blueTitleStyle">智能联动</div>
    <!-- <div class="main no-data" v-if="nodata">
        <Nodata />
    </div>-->
    <div class="main" v-if="!nodata">
      <marquee
        @mouseenter="marqueeEnter"
        @mouseleave="marqueeLeave"
        scrollamount="2"
        direction="up"
        style="width:100%;height:100%;"
      >
        <ul class="warn_list">
          <li
            class="main-content-item startbox"
            v-for="(item,index) in newlinkageList"
            @click="toLd(item)"
            :key="index"
          >
            <div class="datetime">
              <div class="startbox">{{item.linkageTime.slice(0,10)}}</div>
              <div class="startbox">{{item.linkageTime.slice(10,20)}}</div>
            </div>
            <div class="content">
              <el-tooltip :content="item.stationName" placement="top">
                <span>{{ item.stationName+" · " }}</span>
              </el-tooltip>
              <el-tooltip :content="item.linkageReason" placement="top">
                <span>{{item.linkageReason}}</span>
              </el-tooltip>
            </div>
          </li>
        </ul>
      </marquee>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import { JointInspectionModule } from "@/store/modules/JointInspection";
import Nodata from "../../../../components/Nodata/index.vue";
import time from "../../../../utils/time";
interface linkageListType {
  time: string;
  info: string;
}
@Component({ components: { Nodata } })
export default class extends Vue {
  //数据状态
  nodata = false;
  public linkageList: linkageListType[] = [];
  // 监听智能联动滚动列表
  get newlinkageList() {
    if (this.linkageList.length < 1) {
      return this.newlinkageList2;
    } else {
      return this.linkageList;
    }
  }
  newlinkageList2 = [
    {
      linkageTime: "2020-11-18 18:59:00",
      stationName: "110kV天平变电站",
      linkageReason: "#3主变高压侧102开关南可见光",
    },
    {
      linkageTime: "2020-11-18 16:36:03",
      stationName: "110kV天平变电站",
      linkageReason: "#4主变高压侧102开关南可见光",
    },
    {
      linkageTime: "2020-11-18 09:33:40",
      stationName: "110kV天平变电站",
      linkageReason: "107开关南可见光",
    },
    {
      linkageTime: "2020-11-18 08:59:00",
      stationName: "110kV天平变电站",
      linkageReason: "#3主变高压侧102开关南可见光",
    },
    {
      linkageTime: "2020-11-18 07:36:03",
      stationName: "110kV天平变电站",
      linkageReason: "#4主变高压侧102开关南可见光",
    },
    {
      linkageTime: "2020-11-18 19:33:40",
      stationName: "110kV天平变电站",
      linkageReason: "107开关南可见光",
    },
  ];

  // 所属地市
  get CompanyList() {
    let CompanyList = JointInspectionModule.CompanyList || [];
    return CompanyList;
  }
  marqueeEnter(event) {
    event.target.stop();
  }
  marqueeLeave(event) {
    event.target.start();
  }
  fetch() {
    // 请求智能联动滚动列表
    var localCity = "";
    console.log("this.CompanyList:", this.CompanyList);

    if (this.CompanyList && this.CompanyList[0] && this.CompanyList[0].code) {
      localCity = this.CompanyList[0].code;
    } else {
      localCity = "8a1ea5c64bdebad1014bdebc6047087b";
    }
    (this as any).$services
      .linkageList({
        method: "get",
        data: { localCity: localCity },
      })
      .then((result: any) => {
        this.linkageList = result.data.slice(0, 50).map((item) => {
          return {
            deviceName: item.deviceName,
            linkageReason: item.linkageReason,
            stationName: item.stationName,
            // linkageTime: time( new Date(item.linkageTime).getTime())
            linkageTime: item.linkageTime || "",
          };
        });
        console.log("智能联动滚动列表:", this.linkageList);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  toLd(data) {
    // /auxiliarymonitor/linkage?code=1500000001&name=220kV天平变电站
    // console.log(data)
    this.$router.push({
      path: "/auxiliarymonitor/linkage",
      query: {
        // stationName: data.stationName,
        deviceName: data.deviceName,
      },
    });
  }
  mounted() {
    this.fetch();
  }
}
</script>

<style lang="scss" scoped>
.intelligent-linkage {
  width: 100%;
  height: 100%;
  .title {
    height: 0.3rem;
  }
  .main {
    width: 100%;
    margin-top: 0.1rem;
    height: calc(100% - 0.5rem);
    overflow: hidden;
    padding: 0.1rem 0.2rem;
    box-sizing: border-box;
  }
  .warn_list {
    width: 100%;
    li {
      cursor: pointer;
      height: 0.5rem;
      width: 100%;
      margin-bottom: 0.06rem;
      border-radius: 0.04rem;
      padding: 0.06rem 0.16rem;
      background: rgba(15, 81, 81, 0.2);
      div {
        font-size: 0.14rem;
      }
      .datetime {
        width: 1rem;
        height: 100%;

        > div {
          height: 50%;
        }
      }
      .content {
        width: calc(100% - 1rem);
        height: 100%;
        > div {
          height: 50%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
  .nodata {
    height: calc(100% - 0.3rem);
  }
}
</style>